<template>
  <div class="articles-container">
    <el-card class="box-card">
      <!-- 搜索关键字 -->
      <el-form
        :inline="true"
        :model="request"
        label-width="80px"
        class="demo-form-inline"
      >
        <el-row :gutter="10">
          <el-col :span="5">
            <el-form-item label="关键字">
              <el-input
                v-model="request.keyword"
                placeholder="根据文章标题搜索"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="15">
            <el-form-item label="状态" class="element">
              <el-select v-model="request.state" placeholder="">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="remove">清除</el-button>
              <el-button @click="searcher">搜索</el-button>
            </el-form-item>
          </el-col>
          <!-- 新增技巧 -->
          <el-col :span="4" class="success-btn">
            <el-button
              type="success"
              size="small"
              icon="el-icon-edit"
              @click="modification('add')"
              >新增技巧</el-button
            >
          </el-col>
        </el-row>
        <!-- 数据总数显示条 -->
        <el-alert
          :title="`数据一共 ${total} 条`"
          type="info"
          show-icon
          :closable="false"
          v-model="request.pagesize"
        >
        </el-alert>
      </el-form>

      <!-- / 视频弹出层 -->
      <!-- 用户列表 -->
      <div>
        <template>
          <el-table :data="artlist" style="width: 100%">
            <el-table-column label="序号" prop="id" min-width="5%">
            </el-table-column>
            <el-table-column label="文章标题" prop="title" min-width="25%">
              <template slot-scope="scope">
                <span>{{ scope.row.title }}</span>
                <a
                  href="#"
                  class="el-icon-film"
                  style="color:blue;"
                  v-if="scope.row.videoURL"
                  @click.prevent="openVideo(scope.row.videoURL)"
                ></a>
              </template>
            </el-table-column>
            <el-table-column label="阅读数" prop="visits" min-width="15%">
            </el-table-column>
            <el-table-column label="录入人" prop="username" min-width="20%">
            </el-table-column>
            <el-table-column label="录入时间" prop="createTime" min-width="20%">
            </el-table-column>
            <el-table-column label="状态" prop="state" min-width="8%">
              <template v-slot="scope"
                ><span>{{ scope.row.state === 1 ? '已启用' : '已禁用' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" prop="name" min-width="13%">
              <!-- 操作功能区域 -->
              <template v-slot="scope">
                <el-button type="text" @click="Preview(scope.row.id)"
                  >预览</el-button
                >
                <el-button type="text" @click="changer(scope.row)">{{
                  scope.row.state === 0 ? '启用' : '禁用'
                }}</el-button>
                <el-button
                  type="text"
                  :disabled="scope.row.state > 0"
                  @click="modification(scope.row)"
                  >修改</el-button
                >
                <el-button
                  type="text"
                  :disabled="scope.row.state > 0"
                  @click="removeid(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页区域 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="request.page"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="request.pagesize"
            background
            layout="  prev, pager, next,sizes, jumper"
            :total="total"
          >
          </el-pagination>

          <!-- 预览用户弹窗 -->
          <el-dialog
            title="预览文章"
            :visible.sync="addDialogVisible"
            width="900px"
          >
            <!-- 预览弹窗样式 -->
            <div>
              <h2>【视频教程】{{ res.title }}</h2>
              <span v-html="res.createTime"></span>
              <span v-html="res.username"></span>
              <span v-html="res.visits"></span>
              <hr />
              <p v-html="res.articleBody"></p>
            </div>
            <!-- 底部按钮区域 -->
            <span slot="footer" class="dialog-footer">
              <el-button @click="addDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="addDialogVisible = false"
                >确 定</el-button
              >
            </span>
          </el-dialog>

          <!-- 修改用户弹窗 -->
          <el-dialog
            title="修改文章"
            :visible.sync="editDialogVisible"
            width="50%"
          >
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <!-- 文章标题 -->
              <el-form-item label="文章标题" prop="title">
                <el-input
                  v-model="ruleForm.title"
                  placeholder="请输入文章标题"
                ></el-input>
                <a href="#" @click.prevent="videoshow" class="el-icon-film"></a>
              </el-form-item>
              <!--/ 文章标题 -->

              <!-- 富文本编辑器 -->
              <el-form-item label="文章内容" prop="articleBody">
                <el-input
                  v-model="ruleForm.articleBody"
                  v-show="false"
                ></el-input>
                <quill-editor
                  ref="myQuillEditor"
                  :options="editorOption"
                  articleBody
                  v-model="ruleForm.articleBody"
                ></quill-editor>
              </el-form-item>
              <!-- /富文本编辑器 -->

              <!-- 新增技巧弹窗 -->
              <el-form-item>
                <el-button @click="resetForm('ruleForm')">取消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')"
                  >确定</el-button
                >
                <!-- /新增技巧弹窗 -->
              </el-form-item>
            </el-form>
          </el-dialog>
        </template>
      </div>
    </el-card>
    <!-- 视频弹出层 -->
    <div class="videobox" v-if="videoURL">
      <div class="close" @click="closeVideo()">
        <span class="el-icon-close"></span>
      </div>
      <div class="box">
        <video ref="video" :src="videoURL" autoplay></video>
      </div>
    </div>
    <!-- /视频弹出层 -->
  </div>
</template>

<script>
import {
  list,
  remove,
  detail,
  add,
  update,
  changeState
} from '@/api/hmmm/articles'

export default {
  data() {
    return {
      videoURL: null,
      artlist: [],
      total: 0,
      search: '',
      state: null,
      // 控制预览弹出窗的显示与隐藏
      addDialogVisible: false,
      // 控制修改弹出窗的显示与隐藏
      editDialogVisible: false,
      res: {}, // 弹窗内容
      editForm: {},
      request: {
        page: 1,
        pagesize: 10,
        keyword: null
      },
      ruleForm: {
        title: '',
        articleBody: ''
      },
      rules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        articleBody: [
          { required: true, message: '请输入文章标题', trigger: 'blur' }
        ]
      },
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序列表，无序列表
            ['blockquote', 'code-block'], // 引用，代码块
            ['image', 'link'] // 图片 链接
          ]
        },
        placeholder: ''
      }
    }
  },
  created() {
    this.articleslist()
  },
  methods: {
    // 渲染列表
    async articleslist() {
      const { data } = await list(this.request)
      console.log(data)
      this.total = data.counts
      this.artlist = data.items
    },
    // 搜索关键字
    async searcher() {
      await list(this.request)
      this.articleslist()
    },

    // 清除输入框
    remove() {
      this.request.keyword = ''
      this.articleslist()
    },
    // 根据id删除数据
    async removeid(id) {
      const results = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      if (results === 'confirm') {
        await remove({ id })
        console.log(results)
        this.articleslist()
        this.$message.success('删除成功')
      }
    },
    // 预览弹出窗
    async Preview(id) {
      try {
        const { data } = await detail({ id })
        this.res = data
        console.log(data)
        this.addDialogVisible = true
      } catch (err) {
        console.log(err)
      }
    },
    // 修改弹出层
    async modification(id) {
      this.editDialogVisible = true

      // 判断传过来参数是否是add,如果是则清空ruleForm={},
      // 如果不是add,需要根据获取的id调用detail接口,返回data数据赋值给ruleForm
      if (id === 'add') {
        this.ruleForm = {}
      } else {
        // 发起修改文章详情请求
        const { data } = await detail(id)
        this.ruleForm = data
      }
      console.log(this.res, '所有数据')
    },
    // 确定修改
    submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          if (this.ruleForm.id) {
            await update(this.ruleForm)
            this.$message.success('修改文章成功')
          } else {
            // 否则添加文章
            await add(this.ruleForm)
            this.$message.success('添加文章成功！')
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
      this.editDialogVisible = false
      this.articleslist()
    },
    // 取消
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.editDialogVisible = false
    },
    // 启用禁用
    async changer(row) {
      row.state = row.state === 1 ? 0 : 1
      try {
        await changeState({
          id: row.id,
          state: row.state
        })
        this.$message.success('更新成功')
      } catch (err) {
        this.$message.error('更新失败')
      }
    },
    // 视频弹窗
    openVideo(active) {
      this.videoURL = active
      console.log(active)
    },
    closeVideo() {
      this.videoURL = ''
    },
    handleSizeChange(newSize) {
      // console.log(newSize)
      this.request.pagesize = newSize
      this.articleslist()
    },
    handleCurrentChange(newPage) {
      // console.log(newPage)
      this.request.page = newPage
      this.articleslist()
    }
  }
}
</script>

<style lang="scss" scoped>
.articles-container {
  padding: 10px;
}
.success-btn {
  text-align: right;
}
.el-table {
  margin-top: 15px;
  .el-link {
    margin-right: 15px;
  }
}
.el-pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.videobox {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgb(0 0 0 / 30%);
  overflow: hidden;
  z-index: 9999;
}
.videobox .box {
  width: 800px;
  height: 600px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.videobox .box video {
  width: 100%;
  height: 100%;
}
.videobox .el-icon-close {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translate(-50%);
  background: rgb(0 0 0 / 40%);
  box-shadow: 0 0 5px rgb(0 0 0 / 40%);
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  color: rgb(255 255 255);
  font-size: 20px;
}
</style>
